import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Tooltip } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";

import useWechatAccount from "../hooks/useWechatAccount";

import CustomerList from "../components/CustomerList";

const WechatAccountPage = () => {
    const { windowInnerHeight, UTCTimeToLocal } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { selectedCustomer } = useModel("customer");
    const { dataLoading, wechatAccounts, loadWechatAccounts } = useWechatAccount();
    const { submitLoading, deleteWechatAccount } = useWechatAccount();

    const loadData = () => {};

    useEffect(() => {
        loadData();
    }, [selectedCustomer]);

    const openAddWechatAccountModal = () => {
        setModalTitle("新增公众号信息");
        setModalWidth(650);
        setModalComponent(<AddWechatAccountForm selectedCustomer={selectedCustomer} />);
        setModalVisible(true);
    };

    const openEditWechatAccountModal = (record) => {
        setModalTitle("编辑公众号信息");
        setModalWidth(650);
        setModalComponent(<EditWechatAccountForm selectedCustomer={selectedCustomer} record={record} />);
        setModalVisible(true);
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={5}>
                <CustomerList cardBodyHeight={cardBodyHeight} />
            </Col>
            <Col span={19}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>{selectedCustomer?.oiName} - 公众号列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={openAddWechatAccountModal} />
                            <Button icon={<IconRefresh />} onClick={loadWechatAccounts} />
                        </ButtonGroup>
                    }
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight }}
                >
                    <Table loading={dataLoading} size="small" bordered dataSource={wechatAccounts} rowKey="oaarRole" pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
                        <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                        <Table.Column title="公众号名称" dataIndex="oaarRole" align="left" />
                        <Table.Column title="公众号ID(appid)" dataIndex="oaarTime" align="center" render={(_, r, i) => UTCTimeToLocal(_)} />
                        <Table.Column title="secret" dataIndex="oaarMont" align="center" />
                        <Table.Column
                            title="操作"
                            dataIndex="oaarType"
                            align="center"
                            width={90}
                            render={(_, r, i) => (
                                <ButtonGroup theme="borderless">
                                    <Button icon={<IconEdit />} onClick={openEditWechatAccountModal}></Button>
                                    <Popconfirm title="确认要删除该公众号信息吗？" placement="topRight" okButtonProps={{ loading: submitLoading }} onConfirm={() => deleteWechatAccount(r)}>
                                        <Button type="danger" theme="borderless" icon={<IconDelete />}></Button>
                                    </Popconfirm>
                                </ButtonGroup>
                            )}
                        />
                    </Table>
                </SemiCard>
            </Col>
        </Row>
    );
};

const AddWechatAccountForm = ({ selectedCustomer }) => {
    const [form] = Form.useForm();
    const { submitLoading, saveWechatAccount } = useWechatAccount();

    const state = useReactive({});

    const onFinish = async (values) => {
        state.loading = true;
        console.log(values);
        state.loading = false;
    };

    return (
        <Form form={form} layout="vertical" onFinish={onFinish} style={{ padding: "10px 20px" }}>
            <Form.Item label="公众号名称" name="oaaaRole" rules={[{ required: true }]}>
                <Input />
            </Form.Item>

            <Form.Item label="公众号ID(appid)" name="oaaaRole" rules={[{ required: true }]}>
                <Input />
            </Form.Item>

            <Form.Item label="secret" name="oaaaRole" rules={[{ required: true }]}>
                <Input />
            </Form.Item>

            <Form.Item>
                <Space>
                    <Button loading={submitLoading} type="primary" htmlType="submit" theme="solid">
                        保存
                    </Button>
                    <Button loading={submitLoading} onClick={() => form.resetFields()}>
                        重置
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};

const EditWechatAccountForm = ({ selectedCustomer, record }) => {
    const [form] = Form.useForm();
    const { submitLoading, updateWechatAccount } = useWechatAccount();

    const state = useReactive({});

    const onFinish = async (values) => {
        state.loading = true;
        console.log(values);
        state.loading = false;
    };

    return (
        <Form form={form} layout="vertical" onFinish={onFinish} style={{ padding: "10px 20px" }}>
            <Form.Item label="公众号名称" name="oaaaRole" rules={[{ required: true }]}>
                <Input />
            </Form.Item>

            <Form.Item label="公众号ID(appid)" name="oaaaRole" rules={[{ required: true }]}>
                <Input />
            </Form.Item>

            <Form.Item label="secret" name="oaaaRole" rules={[{ required: true }]}>
                <Input />
            </Form.Item>

            <Form.Item>
                <Space>
                    <Button loading={submitLoading} type="primary" htmlType="submit" theme="solid">
                        保存
                    </Button>
                    <Button loading={submitLoading} onClick={() => form.resetFields()}>
                        重置
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};

export default WechatAccountPage;
